<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<Script LANGUAGE="JavaScript">
    function getUniqueName()
    {
        var nameColumn = $("#nameColumn").val();
        var timeColumn = $("#timeColumn").val();
        var spaceColumn = $("#spaceColumn").val();
        var frequentPlaceColumn = $("#frequentPlaceColumn").val();
        $.ajax({
            url: '/getUniqueName',
            type: 'post',
            contentType: 'application/json',
            async: true,
            data: JSON.stringify({
                nameColumn: nameColumn,
                timeColumn: timeColumn,
                spaceColumn: spaceColumn,
                uniqueName: '',
                frequentPlaceColumn: frequentPlaceColumn
            }),
            success: function(data){
                $('#setting_table').html(data);
            }
        });
    }
    function previewSingle()
    {

        var nameColumn = $("#nameColumn").val();
        var timeColumn = $("#timeColumn").val();
        var spaceColumn = $("#spaceColumn").val();
        var frequentPlaceColumn = $("#frequentPlaceColumn").val();
        var uniqueName = $("#uniqueName").val();
        $.ajax({
            url: "/previewSingle",
            type: 'post',
            contentType: 'application/json',
            data: JSON.stringify({nameColumn : nameColumn,timeColumn : timeColumn,spaceColumn : spaceColumn,uniqueName : uniqueName,frequentPlaceColumn : frequentPlaceColumn}),
            async: true,
            success: function(data){
                $('#single_table').html(data);

            }
        });
    }

    function preview()
    {
        document.connection.action="preview";
        document.connection.submit();
    }

    function connectDatabase()
    {
        document.connection.action="connectDatabase";
        document.connection.submit();
    }

    function previewSingleMap()
    {
        document.timeSpaceForm.action="previewSingleMap";
        document.timeSpaceForm.submit();
    }
    function previewMap()
    {
        document.timeSpaceForm.action="previewMap";
        document.timeSpaceForm.submit();
    }
</Script>
<head>
    <link rel="stylesheet" th:href="@{webjars/bootstrap/3.3.5/css/bootstrap.min.css}"/>
    <script src="webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style>
        body{ margin:0px;padding-left: 20px;}
        h3{font-size: 14px;}
        .control-label{width: auto;font-size: 14px;font-weight: normal;text-align: right;padding-top: 7px;padding-right: 0px;}
        .mylabel{font-size: 14px;font-weight: normal;}
        .col-md-3{margin-top: 20px;margin-right: 20px;width: auto;padding-left: 0px;}
        .panel-heading{padding-left: 0px;}
    </style>

</head>

<body class="theme-blue">
<div>
    <div class="row">
        <div class="col-lg-12">
            <section class="panel">
                <div class="panel-body">
                    <div class="container">
                        <div class="row">
                            <form class="form-inline " align="center" name="connection">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">基础库</label>
                                    <div class="col-sm-6">
                                        <select class="form-control" name="dataSourceUrl">
                                            <option value="">请选择数据库</option>
                                            <option value="population" th:selected="${session.database}=='population'">人口库</option>
                                            <option value="legalperson" th:selected="${session.database}=='legalperson'">法人库</option>
                                            <option value="certificate" th:selected="${session.database}=='certificate'">证照库</option>
                                            <option value="credit" th:selected="${session.database}=='credit'">信用库</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group" style="width: auto;margin-right: 0px;margin-top: 0px;">
                                    <button type="button" class="btn btn-info" onclick="connectDatabase()">连接</button>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label">数据表</label>
                                    <div class="col-sm-6">
                                        <select class="form-control" name="tableName" id="tableName">
                                            <option value="">请选择表名</option>
                                            <option th:each="tableName:${session.tableNames}" th:text="${tableName}" th:value = "${tableName}" th:selected="${session.database==null?false:session.tableName==tableName}"></option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group" style="width: auto;margin-right: 0px;margin-top: 0px;">
                                    <button type="button" class="btn btn-info" onclick="preview()">预览</button>
                                </div>

                            </form>

                        </div>

                    </div>
                    <p th:if="${msg!=null}" ><font size="5" color="red">数据源配置错误</font></p>

                    <div th:if="${session.dataSource != null}">
                        <div class="panel-heading">
                            数据库预览
                        </div>
                        <div class="form-inline">
                            <table class="table table-bordered table-striped">
                                <thead>
                                <tr role="row" style="background-color: #00a4e7;color: #ffffff; font-weight: normal">
                                    <th th:each="tableName:${session.previewColumn}" th:text="${tableName}">字段</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr role="row" th:each="line_data:${session.previewData}">
                                    <td th:each="column_data:${line_data}" th:text="${column_data}">数据</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div th:if="${session.dataSource != null}">
                    <div class="panel-heading">
                        时空分析设置
                    </div>
                    <div class="panel-body" id="setting_table" th:fragment="setting_table">
                        <form class="form-inline " name = "timeSpaceForm" >
                            <div class="form-group ">
                                <label class="mylabel">人名字段</label>
                                <select class="form-control" name="nameColumn" id="nameColumn">
                                    <option th:each="columnName:${session.previewColumn}" th:text="${columnName}" th:value ="${columnName}" th:selected="${session.timeSpaceForm==null?true:session.timeSpaceForm.nameColumn==columnName}"></option>
                                </select>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="form-group "  >
                                <label class="mylabel">时间字段</label>
                                <select class="form-control" name="timeColumn" id="timeColumn">
                                    <option th:each="columnName:${session.previewColumn}" th:text="${columnName} " th:value = "${columnName}" th:selected="${session.timeSpaceForm==null?true:session.timeSpaceForm.timeColumn==columnName}"></option>
                                </select>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="form-group ">
                                <label class="mylabel">地点字段</label>
                                <select class="form-control" name="spaceColumn" id="spaceColumn">
                                    <option th:each="columnName:${session.previewColumn}" th:text="${columnName}" th:value = "${columnName}" th:selected="${session.timeSpaceForm==null?true:session.timeSpaceForm.spaceColumn==columnName}"></option>
                                </select>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="form-group ">
                                <label class="mylabel">常居地字段</label>
                                <select class="form-control" name="frequentPlaceColumn" id="frequentPlaceColumn">
                                    <option th:each="columnName:${session.previewColumn}" th:text="${columnName}" th:value = "${columnName}" th:selected="${session.timeSpaceForm==null?true:session.timeSpaceForm.frequentPlaceColumn==columnName}"></option>
                                </select>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button type="button" class="btn btn-info " onclick="getUniqueName()">筛选</button>
                            <button type="button" class="btn btn-info " onclick="previewMap()">综合轨迹图</button>
                            <div class="form-inline" >
                                <div class="form-group col-md-3">
                                    <label class="mylabel">人员选择</label>
                                    <select class="form-control" name="uniqueName" id="uniqueName">
                                        <option  th:each="columnName:${session.uniqueNameList}" th:text="${columnName}" th:value = "${columnName}"></option>
                                    </select>
                                </div>
                                <div class="form-group col-md-3">
                                    <button type="button" class="btn btn-info " onclick="previewSingle()">预览个人轨迹</button>
                                    <button type="button" class="btn btn-info " onclick="previewSingleMap()">预览个人轨迹图</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div th:if="${session.dataSource != null}" >
                    <div class="panel-heading">
                        个人轨迹预览
                    </div>
                    <div class="panel-body" id="single_table" th:fragment="single_table">
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr style="background-color: #00a4e7;color: #ffffff; font-weight: normal">
                                <th th:each="columnName:${session.previewSingleColumn}" th:text="${columnName}">字段</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="line_data:${session.previewSingleData}">
                                <td th:each="column_data:${line_data}" th:text="${column_data}">数据</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
        </div>
    </div>

</div>
</body>
</html>